<template>
    <view>
        <view class="hoter mt-20 pl-30 pr-30">
            <view class="hoter-in flex pt-30 pb-24">
                <hj-image
                    :img="info.coverImage"
                    height="180rpx"
                    width="180rpx"
                    mode="aspectFill"
                    radius="12rpx"
                />
                <view class="flex-auto pl-20">
                    <view class="ft-32 t-3 title">
                        {{ info.hotelNameZh || ''
                        }}<text v-if="info.addressName">({{ info.addressName }})</text>
                    </view>
                    <view class="ft-28 t-9 mt-10">
                        {{ info.addressZh || '' }}
                    </view>
                </view>
            </view>
            <view class="space-between menu ft-26 t-6">
                <view class="menu-item center w100" @click="goContact">
                    <hj-image
                        src="menu-05.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                    <view class="ml-8"> 联系客服 </view>
                </view>
                <view class="menu-item center w100" @click="goAbout">
                    <hj-image
                        src="menu-06.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                    <view class="ml-8"> 设施・政策 </view>
                </view>
                <view class="menu-item center w100" @click="goPilot">
                    <hj-image
                        src="menu-03.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                    <view class="ml-8">导航到店</view>
                </view>
            </view>
            <!-- 入离时间 -->
            <view class="hoter-bot mt-30">
                <view class="hoter-bot-left column space-between">
                    <view class="dot"></view>
                    <view class="dot"></view>
                    <view class="cen"></view>
                </view>
                <view class="hoter-bot-item align-center">
                    入住：{{ getTime(orderDet.checkInDate) }}
                    {{ formatDate(info.hotelPolicy?.checkInTime, '14:00') }}后
                </view>
                <view class="hoter-bot-item align-center">
                    离店：{{ getTime(orderDet.checkOutDate) }}
                    {{ formatDate(info.hotelPolicy?.checkOutTime, '13:00') }}前
                </view>
            </view>
        </view>
        <!-- 退房政策 -->
        <view class="tips c-m ft-26">
            取消政策：本单在{{ getTime(orderDet.checkInDate) }}
            {{ formatDate(info.hotelPolicy?.freeCancelHours, '20:00') }}前可免费取消
        </view>
    </view>
</template>

<script setup>
/**
 * @description 详情页面酒店信息
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'DetailHotel'
})
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    },
    orderDet: {
        type: Object,
        default: () => {}
    }
})

const iconsSize = ref('32rpx')

// 时间格式处理
const getTime = time => {
    if (!time) {
        return ''
    }
    const str = ['日', '一', '二', '三', '四', '五', '六']
    return dayjs(time).format('MM月DD日') + '(周' + str[dayjs(time).day()] + ')'
}

// 时间格式处理
const formatDate = (date, defaultDate) => {
    if (!date) {
        return defaultDate
    }
    try {
        const today = dayjs().format('YYYY-MM-DD')
        return dayjs(`${today} ${date}`).format('HH:mm')
    } catch (e) {
        console.error('时间格式转换失败:', e)
        return defaultDate
    }
}

// 联系客服
const goContact = () => {
    uni.showModal({
        title: '联系客服',
        content: '是否拨打客服电话？',
        success: res => {
            if (res.confirm) {
                uni.makePhoneCall({
                    phoneNumber: props.orderDet?.phone,
                    fail: e => {
                        console.error('联系客服失败：', e)
                    }
                })
            }
        }
    })
}
// 打开内置地图 注意经纬度不能是字符串
const goPilot = () => {
    if (!props.info?.longitude || !props.info?.latitude) {
        return
    }
    let name = `${props.info?.hotelNameZh}${
        props.info?.addressName ? '(' + props.info?.addressName + ')' : ''
    }`
    uni.openLocation({
        longitude: props.info?.longitude,
        latitude: props.info?.latitude,
        name: name,
        address: props.info?.addressZh,
        fail: e => {
            console.error('地图打开失败：', e)
        }
    })
}
// 关于懿家
const goAbout = () => {
    const id = props.info?.id || ''
    if (!id) return
    uni.navigateTo({
        url: `/pages/hotel/hotel-about/index?hotelId=${id}`
    })
}
</script>

<style scoped lang="scss">
.tips {
    background: rgba($color: $uni-color-primary, $alpha: 0.16);
    padding: 16rpx 30rpx;
}
.hoter {
    background: $uni-bg-color;
	&-in {
	    .title {
	        min-height: 88rpx;
	    }
	}
    &-bot {
        border-top: 1px solid $uni-bg-color-hover;
        padding: 16rpx 0;
        position: relative;
        &-left {
            width: 20rpx;
            height: calc(100% - 76rpx);
            position: absolute;
            left: 0rpx;
            top: 38rpx;
            border-radius: 10rpx;
            overflow: hidden;
            .dot {
                background: $uni-color-primary;
                height: 20rpx;
                width: 100%;
                border-radius: 50%;
                position: relative;
                z-index: 9;
            }
            .cen {
                width: 12rpx;
                height: 100%;
                background: rgba($color: $uni-color-primary, $alpha: 0.3);
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        &-item {
            height: 64rpx;
            position: relative;
            padding-left: 40rpx;
        }
    }
    .menu {
        &-item {
            height: 72rpx;
            background: #f6f7fb;
            margin-right: 12rpx;
            border-radius: 10rpx;
        }
        &-item:last-child {
            margin-right: 0;
        }
    }
}
</style>
